<template>
  <div class="app-user">
   <Query
     :items="queryColumns"
     :initial-params="queryParams"
     @query="handleQuery"
   />
   <Table
     :table-columns="tableColumns"
     :table-loading="tableLoading"
     :table-data="tableData"
     :total="total"
     :showIndex="true"
     @pagination="handlePagination"
   >
     <template #headImg="scope">
       <img v-if="scope.row.headImg" :src="scope.row.headImg" style="width: 50px;height: 50px;border-radius: 50%;" alt="">
     </template>
     <template #status="scope">
       <el-tag :type="scope.row.status === 1 ? 'primary' : 'danger'">{{ scope.row.status === 1 ? '正常' : scope.row.status === 0 ? '注销' : '锁定'}}</el-tag>
     </template>
     <template #sex="scope">
       {{ scope.row.sex === 1 ? '男' : scope.row.sex === 2 ? '女' : '未知'}}
     </template>
     <template #opt="scope">
      <el-button type="primary" link @click="goDetail(scope.row)">详情</el-button>
       <!-- <el-button :type="scope.row.status === 1 ? 'danger' : 'primary'" link @click="changeValue(scope.row)">{{ scope.row.status === 1 ? '锁定' : '恢复' }}</el-button> -->
     </template>
   </Table>
  </div>
</template>

<script setup name="user">
import Table from "@/components/Table/index.vue";
import Query from "@/components/Query/index.vue";
import { appUserList } from "@/api/member";
const { proxy } = getCurrentInstance()
const tableData = ref([])
const total = ref(0)
const tableLoading = ref(true)
const loading = ref(false)
const showDialog = ref(false)
const router = useRouter();

const data = reactive({
 tableColumns: [
   { label: "用户昵称", prop: "nickname", },
   { label: "头像", prop: "headImg", slot: 'headImg' },
   { label: "手机号", prop: "phone" },
   { label: "状态",  prop: "status", slot: 'status'},
   { label: "操作",  prop: "opt", slot: 'opt'},
 ],
 queryColumns: [
   { label: '用户昵称', prop: 'nickname', type: 'input', attrs: { placeholder: '请输入用户昵称' } },
   { label: '手机号', prop: 'phone', type: 'input',  attrs: { placeholder: '请输入手机号' } },
   { label: '状态', prop: 'status', type: 'select', options: [{ label: "正常", value: 1 }, { label: "已禁用", value: 2 }]}
 ],
 pageParams: {
  current: 1,
  size: 10
 },
 queryParams: {},
 formItems: [
   {
     prop: 'nickname',
     label: '用户昵称',
     type: 'input',
     placeholder: '请输入用户昵称'
   },
   {
     prop: 'tele',
     label: '手机号',
     attrs: { maxlength: 11 },
     type: 'input',
     placeholder: '请输入手机号'
   },
 ]
})


const { tableColumns, queryColumns, pageParams, queryParams } = toRefs(data)
/** 获取列表数据 */
const getList = () => {
  tableLoading.value = true
  const data  = {
     ...queryParams.value,
     ...pageParams.value
  }
  appUserList(data)
   .then(res => {
       tableData.value = res.data.records
       total.value = res.data.total
   })
   .finally(() => {
       tableLoading.value = false
   })
}
getList()

/** 搜索按钮操作 */
const handleQuery = (val) => {
 queryParams.value = val
 getList()
}

const handlePagination = (val) => {
 pageParams.value = val
 getList()
}
const goDetail = (row)=>{
  router.push({
    path:'/members/detail',
    query:{
      id:row.id
    }
  })
}
const handleSubmit = async (data) => {
 loading.value = true
 try {
   // 这里调用API进行提交
   await saveUser(data)
   await new Promise(resolve => setTimeout(resolve, 1000))
   showDialog.value = false
   getList()
   proxy.$modal.msgSuccess("操作成功")
 } finally {
   loading.value = false
 }
}
const changeValue = (row) => {
 proxy.$modal.confirm(`是否确认${row.status === 1 ? '锁定' : '解锁'}此用户？`)
 .then(() => {
   saveUser({ id: row.id, account: row.account, status: row.status === 1 ? 2 : 1})
   .then(() => {
     proxy.$modal.msgSuccess("操作成功")
     getList()
   })
 })
}

</script>
<style lang="scss">
.app-user {
 padding: 8px;
}
</style>